
/**
 * 全局样式
 */
html,body{
  width:100%;
  height:100%;
  padding:0;
  margin:0;

}


.content{

  width:100%;
  height:100%;

}

.img-list-container{
  position:relative;
  width:440px;
  height:220px;
  border-radius:1%;
  overflow:hidden;


}

.img-list-container:hover .link-copy{
  opacity:0.6;
}

.img-list-container:hover .link{
  display:block;
}


.img-list-container .img-list-bottom{
  position:absolute;
  left:0;
  bottom:0;
  height:32px;
  width:100%;
  z-index:9999;
}
.img-list-container .link-copy{
  position:absolute;
  width:50px;
  height:26px;
  right:16px;
  bottom:38px;
  background:#000;
  opacity:0;
  border-radius:5px;
  transition: opacity 0.3s;
  z-index:9999;
}
.img-list-container .link{
  position:absolute;
  display:none;
  width:38px;
  height:26px;
  right:16px;
  bottom:38px;
  padding:0 6px;
  text-align:center;
  line-height:26px;
  color:#fff;
  background: none;
  z-index:10000;
}

.img-list-container .link span{
  display:inline-block;
  margin-right:3px;
  cursor:pointer;
  transition:text-shadow 0.3s;
}

.img-list-container .link span:hover{
  text-shadow:
  0 0 5px #fff,
  0 0 10px #fff;
}

.img-list-container .img-desc{

  position:absolute;
  left:20px;
  bottom:12px;
  color:#fff;
  font-size:14px;
  font-family:"微软雅黑";
  cursor:pointer;
  z-index:101;
}

.img-list-container .img-desc:hover{
  text-shadow:
  0 0 5px #fff,
  0 0 10px #fff;
}

/**
 * 图片列表相关样式
 */
.img-content{
  position:absolute;
  width:2200px;
  height:220px;
  z-index:11;
  transition:left .8s ease;
}

.img-content li{
  float:left;
}

.img-content li img{
  width:440px;
  height:220px;
  cursor:pointer;
}

/**
 * 控制按钮相关样式
 */

.controller-units-list{
  position:absolute;
  right:12px;
  bottom:12px;
  z-index:9999;
}
.controller-units-list .img-circle{
  float:left;
  position:relative;
  width:20px;
  height:20px;
  margin-right:5px;
  z-index:9999;
}

.controller-units-list .img-circle-focus{
   background-image:url(../images/controllerUnit.png);
}

.controller-units-list .outer-circle{
  position:absolute;
  width:14px;
  height:14px;
  left:50%;
  margin-left:-7px;
  top:50%;
  margin-top:-7px;
  border-radius:50%;
  cursor:pointer;
  text-align:center;
  z-index:9999;



}



.controller-units-list .outer-circle .inner-circle{
  display:inline-block;
  position:absolute;
  top:50%;
  margin-top:-5px;
  left:50%;
  margin-left:-5px;
  width:10px;
  height:10px;
  border-radius:50%;
  z-index:9999;


}

.controller-units-list .outer-circle .inner-circle-normal{

  background-color:#fff;
}

.controller-units-list .outer-circle-normal:hover {
  background-color:#fff;
}

.controller-units-list .outer-circle:hover .inner-circle-normal{
  background: rgb(0,161,214);
}
